<template>
    <div class="container">
        <div class="header block">
            <div class="enterprise-basic">
                <div class="title">派遣单位名称：{{ serveCompanyName }}</div>
                <div>
                    <span class="detail-key">项目数：</span>
                    <span class="detail-value">{{ ppCount }}</span>
                    <span class="detail-key">进行中：</span>
                    <span class="detail-value">{{ progressCount }}</span>
                </div>
            </div>
            <div class="search">
                <input
                    type="text"
                    placeholder="请输入人员名称/项目名称"
                    class="input search-input"
                    v-model="searchText"
                    @keydown.enter="search"
                />
                <button class="btn" @click="search">搜索</button>
                <button class="btn-white" @click="onReset">重置</button>
                <button class="btn" @click="onExport()">
                    <i class="el-icon el-icon-upload2" />导出表格
                </button>
                <export-button style="width: initial" @export="onExport()">导出表格</export-button>
                <button class="btn-green" @click="onPlace()">
                    <i class="el-icon el-icon-folder-add" />归档
                </button>
            </div>
        </div>
        <div class="block">
            <div class="table">
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    :header-row-style="{ color: '#202536' }"
                    :row-style="{ color: '#5E617D' }"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" />
                    <el-table-column prop="projectName" label="项目名" />
                    <el-table-column prop="contacts" label="负责人" />
                    <el-table-column prop="pwCount" label="总人数" />
                    <el-table-column prop="createTime" label="创建时间" />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <p
                                class="link"
                                @click="
                                    $router.push({
                                        path: '/project/make/' + scope.row.id
                                    })
                                "
                            >
                                查看详情
                            </p>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    class="pagination"
                    v-model:currentPage="pageNum"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 30, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                >
                </el-pagination>
            </div>
        </div>
    </div>
    <alertBox
        class="place-box"
        data-title="创建项目归档"
        v-if="placeIds"
        @close="placeIds = ''"
    >
        <div class="row place-row">
            <div class="text"><span class="important">*</span>项目标签</div>
            <div>
                <el-radio v-model="placeType" label="重复创建"
                    >重复创建</el-radio
                >
                <el-radio v-model="placeType" label="项目结束"
                    >项目结束</el-radio
                >
            </div>
        </div>
        <div class="row place-row">
            <div class="text"><span class="important">*</span>备注</div>
            <el-input
                type="textarea"
                class="textarea"
                v-model="placeRemark"
            ></el-input>
        </div>
        <button class="btn mini-btn" @click="onPlaceSubmit">提交归档</button>
    </alertBox>
</template>
<script lang="ts" setup>
import alertBox from '@/components/alert-box.vue'
</script>
<script lang="ts">
import { defineComponent } from 'vue'
import { getEnterpriseProject, placeProject } from '@/api/project'
import { ProjectDto } from '@/api/dto'
import { exportProjectWorkers } from '@/api/export'

export default defineComponent({
    name: 'EnterpriseDetail',
    data () {
        return {
            tableData: [] as ProjectDto[],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            searchText: '',
            searchValue: '',
            selects: [] as string[],
            serveCompanyName: '',
            progressCount: 0,
            ppCount: 0,
            placeType: '',
            placeRemark: '',
            placeIds: ''
        }
    },
    created () {
        this.handleCurrentChange()
    },
    methods: {
        async handleCurrentChange () {
            const result = await getEnterpriseProject({
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                serveCompanyId: Number(this.$route.params.id) as number,
                searchText: this.searchValue
            })
            this.tableData = result.list
            this.total = result.totalCount
            this.serveCompanyName = result.serveCompanyName
            this.progressCount = result.progressCount
            this.ppCount = result.ppCount
        },
        handleSizeChange () {
            this.pageNum = 1
            this.handleCurrentChange()
        },
        search () {
            this.searchValue = this.searchText
            this.pageNum = 1
            this.handleCurrentChange()
        },
        onReset () {
            this.searchText = ''
            this.search()
        },
        async onExport () {
            const result = await exportProjectWorkers({
                ids: this.selects.join(','),
                serveCompanyId: this.$route.params.id as string
            })
            window.location.href =
                process.env.VUE_APP_BASE_URL +
                    '/common/download?delete=true&fileName=' +
                    result

            this.$message.success('导出成功！')
        },
        handleSelectionChange (selects: { id: string }[]) {
            this.selects = selects.map(item => item.id)
        },
        onPlace () {
            this.placeIds = this.selects.join(',')
            if (!this.placeIds) {
                this.$message.error('请至少选择一个项目归档')
            }
        },
        async onPlaceSubmit () {
            if (!this.placeType) {
                this.$message.error('请选择归档标识')
                return
            }
            if (!this.placeRemark) {
                this.$message.error('请输入归档原因')
                return
            }
            await placeProject({
                archivedIds: this.selects,
                isArchived: 1,
                archivedRemark: this.placeType + '：' + this.placeRemark
            })
            this.$message.success('归档成功！')
            this.placeIds = ''
            this.handleCurrentChange()
        }
    }
})
</script>

<style lang="stylus" scoped>
table()
.block
    padding 20px 24px 0
.header
    display flex
    justify-content space-between
    align-items flex-start
    padding-bottom 20px
.table
    margin-top 0
.title
    font-size font-small
    margin-bottom 24px
.detail-value
    margin-right 60px

.place-box
    display flex
    justify-content center
.place-row
    justify-content flex-start
    align-items baseline
    width 600px
    margin 20px auto
.place-box .text
    width 100px
.mini-btn
    margin 30px auto
    display block
:deep() .textarea textarea
    min-height 80px !important
</style>
